import React, { useState } from 'react';
import { Tabs } from 'antd';
import Plan from '@/pages/information/promotion_plan/index';
import Unit from '@/pages/information/promotion_unit/index';
// import KeyWord from '@/pages/information/promotion_keyword/index';
import Create from '@/pages/information/promotion_create/index';

const { TabPane } = Tabs;



export default function Promotion(props: any) {

  const [tabVal, setTabVal] = useState('1');

  const tabClick = (key: string) => {
    console.log(key);
    setTabVal(key);
  }

  const compObj = {
    plan: <Plan loginFlag key={tabVal} />,
    unit: <Unit loginFlag key={tabVal} />,
    // keyword: <KeyWord key={tabVal} />,
    create: <Create key={tabVal} />
  }

  return (
    <div>
      <div style={{paddingLeft: '20px'}}>
        <Tabs defaultActiveKey="1" onChange={tabClick}>
          <TabPane tab="推广计划" key="1" />
          <TabPane tab="推广单元" key="2" />
          {/* <TabPane tab="关键词" key="3" /> */}
          <TabPane tab="创意" key="3" />
        </Tabs>
      </div>
      {tabVal === '1' ? compObj.plan : tabVal === '2' ? compObj.unit : compObj.create }
    </div>
  )
}
